<?
        require_once('../inc/Accounts.php');
        require_once('../inc/Items.php');
        RequireLogin();
        $results = GetItems();
?>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Database Access</title>
        <link type="text/css" rel="stylesheet" href="../inc/bootstrap.css" />
                <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
                <style type="text/css" >
            .error { color: red; }
            input.error { border-color: red; }
        </style>
    </head>
    
    <body>
        
        <? include('../inc/header.php'); ?>
        <div class="container">
                        <? include('../inc/nav.php'); ?>
            <div id="contents">
            
                <? if(isset($_GET['inserted'])): ?>
                        <div class="alert alert-success">
                        <button class="close">×</button>
                        Record inserted succesfuly.
                    </div>
                <? endif; ?>
                <a href="edit.php">+ Add New Item</a>
                <form method="post" action="edit.php">
                <table class="table table-striped table-bordered table-condensed table-hover">
                        <thead>
                    <tr>
                        <th>Product Name</th><th>Price</th><th>Actions</th>
                    </tr>
                    </thead>
                    <tbody>
                    <?
                                        while($rs = $results->fetch_assoc()):
                                                include('item.php');
                                        endwhile;
                                        ?>
                    </tbody>
                </table>
                </form>
            </div>
        </div>
        
            <div class="modal hide fade">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h3>Delete</h3>
                </div>
                <div class="modal-body">
                    <p>Are you sure etc.</p>
                </div>
            </div>
        
       <script type="application/javascript" src="http://code.jquery.com/ui/1.9.1/jquery-ui.js">
           </script>
       <script type="application/javascript" src="../inc/bootstrap.js">
           </script>
       <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>    
        <script type="text/javascript">
                        function CancelEdit()
                        {
                                $(".edit-form").prev().show().end().remove();
                        }
                        function TransformToTr(data)
                        {
                                return  $(data).find(".control-group")
                                                .wrapAll("<tr />").wrap("<td />")
                                                .find("input, select").attr("placeholder",function(){
                                                        return $(this).closest("td").find("label").hide().text();
                                                })
                                                .closest("tr").addClass("edit-form");
                        }
                        $(function(){
                                $('table').dataTable();
                                $(".close").click(function(){
                                        $(this).closest(".alert").slideUp();
                                });
                                
                                var settings = {
                                        backgroundColor: '#FF8888',
                                        color: '#FFFFFF'
                                };
                                <? if(isset($_GET['inserted'])): ?>
                                        $("html, body").animate({scrollTop: $(".info").offset().top}, 2000, 'easeInOutBack');
                                <? endif; ?>
                                $(".info td").css(settings).delay(2000).animate({backgroundColor: '#FFFFFF', color: '#000000'},2000);
                                
                                //      ---------------------
                                //      Load the Insert form
                                $.get('edit.php', function(data){
                                        $("table").append(TransformToTr(data));
                                });
                                
                                $(".delete-link").click(function(){
                                        $.get(this.href, function(data){
                                                $(".modal-body").html($(data).find("form"));
                                        })
                                        $(".modal").modal({ show: true });
                                        return false;
                                });
                                $(".edit-link").click(function(){
                                        CancelEdit();
                                        var $tr = $(this).closest("tr").hide();
                                        $.get(this.href, {date: new Date()}, function(data){
                                                var $tr2 = TransformToTr(data);
                                                $tr.after($tr2);
                                        })
                                        return false;
                                });
                                $("form").submit(function(e) {
                                        var postData = $(this).serialize();
                                        $.post(this.action, postData + '&ajax=true', function(data){
                                                if($(data).find(".control-group").length > 0){
                                                        $(".edit-form").replaceWith(TransformToTr(data));
                                                }else{
                                                        $(".edit-form").replaceWith(data);
                                                }
                                        });
                    return false;
                });
                                $(".cancel-link").live('click',function(){
                                        CancelEdit();
                                        return false;
                                });
                        });
                </script>        
    </body>
</html>

